import React, { useState, useEffect } from "react";
import Tabbar from "../../components/Tabbar/index"; // 封装的 底部组件
import { SideBar, NavBar, Toast } from "antd-mobile"; // 组件
import { featchCate, ProductLists, addCart, readCart } from "@/api"; // 请求
import { useNavigate, useDispatch } from "umi"; // 路由  // dva 仓库
import { setCart } from "@/utils/index"; // 购物车商品数量存缓存 做redux持久化
import Qs from "qs";
import Icon from "../../components/icon/index";
import "./assets/style.scss";
import axios from "axios";
export default function index() {
  const dispatch = useDispatch(); // 使用 dispatch 设置仓库 值
  const setStore = (num: Number) => {
    // 封装函数setStore, 使用 dispatch 设置仓库 值
    dispatch({
      type: "cart/setCartLength",
      num,
    });
  };
  /* 路由跳转 */
  const navigate = useNavigate();

  const [cateList, setCateList] = useState<Array<any>>([]); //  存储 商品列表请求
  /* 获取点赞商品列表 */
  const dianzanList = async () => {
    const res = await axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        token: localStorage.getItem("token"),
      },
      method: "get",
      url: "http://43.139.124.13:8888/star/getStarList",
    });
    console.log(res);
    setCateList(res.data.data);
  };

  /* useEffect 钩子 */
  useEffect(() => {
    dianzanList();
  }, []);
  return (
    <div className="cate">
      {/* 头部导航  */}
      <NavBar
        onBack={() => {
          navigate("/home");
        }}
        className="navBar"
      >
        点赞列表
      </NavBar>
      {/* 侧边 导航 */}
      <div className="cartBox">
        {/* 内容区 */}
        <div className="cateContents">
          {cateList?.map((element: any) => (
            <div
              className="cardCate"
              key={element.id}
              onClick={() => {
                navigate("/cateContent", {
                  state: {
                    id: element.id,
                  },
                });
              }}
            >
              <img style={{ width: 90 }} src={element.image} />
              <div className="cardChild">
                <div className="text">
                  <span>{element.name}</span>
                  <span>{`${element.price}元`}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      {/* 底部 导航 */}
      <Tabbar></Tabbar>
    </div>
  );
}
